<template>
  <view class="container">
    <view class="top-view">
      <u-search class="search" :showAction="true" placeholder="搜索" :animation="true" bg-color="black"
                borderColor="darkgray" style="width: 500upx;"></u-search>
      <uni-icons type="folder-add" size="40" color="#d3d3d3" @click="navTo('/pages/asset/addFile')"></uni-icons>

    </view>


    <view class="cover-container" >

      <view class="tj-sction-test">
        <view class="tj-item">
          <text class="kj-view">余额 </text>

          <text class="num" >{{balance.dataCoin||0}} <text style="font-size: 12px; margin-left: 10px;">积分</text></text>
        </view>
        <view class="button-v">
          <button class="button-cz" @click="natorecharge()">充值</button>
        </view>
      </view>
    </view>
    <view class="data-log-box" style="padding: 0">
      <view v-for="(item, index) in OrderList.rows" :key="index" class="log-item">
        <view class="log-status">
          <text v-if="item.createUserId === item.userId">购买</text>
          <text v-else>卖出</text>
        </view>

        <view style="background-color: #2f3045; padding: 10px;">
          <view class="log-box1">
            <view class="log-image">
              <image :src="item.productInfo.iconUrl" mode="aspectFill"></image>
            </view>
            <view class="log-info">
              <view class="log-info1">
                <view>{{ item.productInfo.name|| '-'  }} </view>
                <view>{{ item.amount|| '-' }}</view>
              </view>
              <view class="log-info1">
                <view>{{ item.productInfo.brief || '-' }} </view>
                <view> ×{{ item.productInfo.num || '-' }}</view>
              </view>
            </view>
          </view>
          <view class="log-meta">
            <view class="log-info1">
              <view>时间</view>
              <view>{{ item.orderTime || '-' }} </view>
            </view>
            <view class="log-info1" v-if="item.createUserId === item.userId">
              <view>来自</view>
              <view>{{ item.productInfo.ownUserId || '-' }}</view>
            </view>
            <view v-else class="log-info1" >
              <view>去往</view>
              <view>{{ item.productUserId || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
import {getwallet,getuserDrinfo} from '@/api/user.js';
import { getOrderList } from '@/api/trade';
import {getUserInfo} from '@/api/right.js'
import {
  mapState
} from 'vuex';
let startY = 0,
    moveY = 0,
    pageAtTop = true;
export default {
  components: {
    ...mapState(['spaceData','userInfo']),
    listCell
  },
  data() {
    return {
      coverTransform: 'translateY(0px)',
      coverTransition: '0s',
      moving: false,
      balance:null,
      OrderList: {
        rows: [], // 初始化为空数组
        status: 0,
        text: '全部',
        loadingType: 'more'
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        //ownUserId:this.userInfo.userId,
      }
    }
  },
  onLoad() {
    this.loadData();
  },
  onReachBottom() {
    this.params.pageNum++;
    this.loadData(); // 获取的数据列表
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1;
    this.loadData(); // 获取的数据列表
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000
    });
    uni.stopPullDownRefresh(); // 停止刷新
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.navTo('/pages/set/set');
    } else if (index === 1) {
      // #ifdef APP-PLUS
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const currentWebview = page.$getAppWebview();
      currentWebview.hideTitleNViewButtonRedDot({
        index
      });
      // #endif
      uni.navigateTo({
        url: '/pages/notice/notice'
      })
    }
  },
  // #endif
  computed: {
    ...mapState([ 'userInfo','hasLogin']),

  },
  methods: {
    loadData() {

    },



    handleUserInfoBoxClick() {
      if (this.hasLogin===false) {
        // 如果用户未登录，跳转到登录页面
        this.navTo('/pages/public/login');
      } else {
        this.loadData();

      }
    },
    natorecharge() {
      uni.navigateTo({
        url: `/pages/user/recharge`
      })
    },

    navTo(url) {
      uni.navigateTo({
        url
      })
    },
    async loadData() {
      try {
        let res = await getOrderList(this.params);
        console.log(res);
        if (res.code !== 200) {
          throw new Error(res.msg || '请求出错');
        }
        this.OrderList.rows = this.OrderList.rows.concat(res.rows); // 更新订单列表
      } catch (error) {
        console.error('请求出错：', error);
        // 处理请求出错的情况，例如显示错误提示或者进行其他操作
        uni.showToast({
          title: error.message || '请求出错，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    },


    coverTouchstart(e) {
      if (pageAtTop === false) {
        return;
      }
      this.coverTransition = 'transform .1s linear';
      startY = e.touches[0].clientY;
    },
    coverTouchmove(e) {
      moveY = e.touches[0].clientY;
      let moveDistance = moveY - startY;
      if (moveDistance < 0) {
        this.moving = false;
        return;
      }
      this.moving = true;
      if (moveDistance >= 80 && moveDistance < 100) {
        moveDistance = 80;
      }

      if (moveDistance > 0 && moveDistance <= 80) {
        this.coverTransform = `translateY(${moveDistance}px)`;
      }
    },
    coverTouchend() {
      if (this.moving === false) {
        return;
      }
      this.moving = false;
      this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
      this.coverTransform = 'translateY(0px)';
    }
  }
}
</script>
<style lang='scss'>
%flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

%section {
  display: flex;
  justify-content: space-around;
  align-content: center;
  background: #fff;
  border-radius: 10upx;
}

page {

}







.cover-container {
  margin-top: 10px;

  .arc {
    position: absolute;
    left: 0;
    top: -34upx;
    width: 100%;
    height: 36upx;
  }

  .tj-sction-test {
    @extend %section;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15upx;
    background-color: rgba(#9E9DBA, 0.2);

    padding: 10upx 40upx 10upx 0;
    .tj-item {
      @extend %flex-center;
      flex-direction: column;
      font-size: $font-sm;
      color: #eff6ff;
      height: 120upx;
      padding-left: 20upx;
    }



    .button-cz{
      background:linear-gradient(to right,#5eba8f,#3ba9b3) ;
      color: #fff;
      height: 55upx;
      width: 150upx;
      line-height: 55upx;
      border-radius: 25upx;
      font-size: $font-base;

    }
    .num {
      font-size: $font-lg +8upx;
      color: #eff6ff;
      margin-bottom: 8upx;

    }
    .kj-view{
      color: #c7c7c7;
      font-size: 20upx;
    }

  }
}
.container {

  padding: 20upx;

  margin-top: 20upx;

  .top-view {
    display: flex;
  }

}
.data-log-box {
  padding: 20upx;
}
.log-box1{
  padding: 10px;
  color: #d3d3d3;
  display: flex;
}
.log-item {
  align-items: center;
  margin: 15px 0;
}
.log-status{
  background-color: #242a42;
  font-size: 18px;
  color: #f6d790;
  padding: 5px 10px;
}
.log-image {
  width: 110upx;
  height: 110upx;
  margin-right: 20upx;
}

.log-image image {
  width: 100%;
  height: 100%;
}

.log-info {
  flex: 1;
}
.log-info1 {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}
.log-meta {
  color: #d3d3d3;
  padding: 0 10px;
  font-size: 14px;
}




</style>